<script setup>
import { onMounted, ref } from "vue";
import * as echarts from 'echarts'
import chinaMapData from '@/store/china.json'
import pointList from '@/store/pointData.js'
import { center } from "underscore.string";
const chinaRef = ref()
const data = pointList
const new_data = []
const lineData = []


function drawMap() {
    const myChart = echarts.init(chinaRef.value, { renderer: 'canvas' })

    echarts.registerMap('china', chinaMapData)
    const option = {
        backgroundColor: 'pink',
        geo: {
            type: 'map',
            map: 'china',
            zoom: 5,
            center: '',
            roam: true,
            scaleLimit: {
                min: 1,
                max: 25
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'green'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: 'blue'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0,102,154)',
                    borderWidth: 2,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(0,102,154,0)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,102,154,.3)'
                            }
                        ]
                    }
                },
                emphasis: {
                    borderWidth: 1,
                    areaColor: 'rgba(0,102,154)'
                }

            }
        },
        series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                large: true,
                largeThreshold: 8000,
                symbol: 'circle',
                symbolSize: 10,
                itemStyle: {
                    opacity: 0.6,
                    color: 'red'
                },
                zlevel: 1,
                data: data
            },

        ]

    }
    myChart.setOption(option)
    // console.log(myChart.getModel().getSeries()[0].coordinateSystem.regions)

    myChart.on('click', async (params) => {
        //底图切换
        if (params.componentType === 'geo') {
            try {
                const name = params.name

                const file_path = `/src/store/province/${name}.json`
                const Province = await import(/* @vite-ignore */ `${file_path}`)
                echarts.registerMap(`${name}`, Province)
                const regions = myChart.getModel().getSeries()[0].coordinateSystem.regions
                const rect = regions.filter(item => item.name === params.name)[0]._rect
                const x_min = rect.x
                const x_max = rect.x + rect.width
                const y_min = rect.y
                const y_max = rect.y + rect.height
                const new_data1 = data.filter(item => item.value[0] > x_min && item.value[0] < x_max && item.value[1] > y_min && item.value[1] < y_max)
                Object.assign(new_data, new_data1)
                myChart.setOption({
                    geo: {
                        map: `${name}`,
                        center: '',
                        zoom: 1,
                    },
                    series: [
                        {
                            data: new_data
                        }
                    ]

                })

            } catch (error) {
                console.log(error + '文件不存在')
            }
        }
        //点击更改点的颜色
        if (params.componentSubType === 'scatter' && new_data.length !== 0) {
            if (params.data.itemStyle.color === 'blue') {
                new_data[params.dataIndex].itemStyle.color = 'green'
                myChart.setOption({
                    series: [
                        {
                            data: new_data
                        }
                    ]
                })
            } else {
                new_data[params.dataIndex].itemStyle.color = 'blue'
                myChart.setOption({
                    series: [
                        {
                            data: new_data
                        }
                    ]
                })
            }

        }
    })
    myChart.on('georoam', (params) => {
        // let geoIndex = myChart.getGeoIndexByName('china')
        // console.log(myChart)
        // console.log()
    })
    myChart.on('finshed', function () {
        console.log('asda')
    })
}
const throttle = (fn, time) => {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(function () {
                fn()
                timer = null
            }, time)
        }
    }
}
onMounted(() => {
    drawMap()
})

</script>
<template>
    <div ref="chinaRef" class="china">

    </div>
</template>
<style scoped>
.china {
    width: 800px;
    height: 600px;
    margin: 20px;
    border: 2px solid blue;
}
</style>
